<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="example"></div>
		<script src="../js/react.development.js"></script>
		<script src="../js/react-dom.development.js"></script>
		<script src="../js/babel.min.js"></script>
		<script src="../js/prop-types.js"></script>
		<script type="text/babel">
			const p1 = {
				name: "张三",
			};
			function Person(props) {
				return (
					<ul>
						<li>姓名：{props.name}</li>
						<li>年龄：{props.age}</li>
						<li>性别：{props.gender}</li>
					</ul>
				);
			}

			Person.defaultProps = {
				gender: "男",
				age: 18,
			};

			Person.propType = {
				name: PropTypes.string.isRequired,
				age: PropTypes.number,
				gender: PropTypes.string,
			};

			ReactDOM.render(<Person {...p1} />, example);
		</script>
	</body>
</html>
